<template>
    <div>
        <div class="title text-6 mb-8">停车位</div>
        <div class="data">
            <el-descriptions
                :column="1"
                size="large"
                class="mb-8"
                border
                v-for="v in data"
            >
                <el-descriptions-item label="停车场名称">
                    {{ v.name }}
                </el-descriptions-item>
                <el-descriptions-item label="空闲车位数量">
                    {{ v.emptyPublicSC }}
                </el-descriptions-item>
                <el-descriptions-item label="车位" width="20">
                    <template v-for="ps in v.parkSpaces">
                        <el-tag
                            v-if="ps.type === 0"
                            size="small"
                            class="mr-2 mb-2"
                            :type="ps.status === 0 ? 'success' : 'danger'"
                        >
                            {{ ps.number }}
                        </el-tag>
                    </template>
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getParkPageApi } from '@/apis/park'
import { getParkSpacePageApi } from '@/apis/parkSpace'
import { groupBy } from 'lodash-es'

const data = ref<any>([])

const getData = async () => {
    const parks = (await getParkPageApi({ limit: 1000 })) as any
    const parkSpaces = (await getParkSpacePageApi({ limit: 1000 })) as any
    const parkSpacesGroupByParkId = groupBy(parkSpaces.rows, 'parkId')
    const res = parks.rows.map((park: any) => {
        return {
            ...park,
            parkSpaces: parkSpacesGroupByParkId[park.id] || [],
        }
    })
    data.value = res
}

getData()
</script>

<style scoped></style>
